<template>
  <div>
    <cube-page :title="title" :showBackButton="true" />
    <div class="view-wrapper">
      <div class="index-list-wrapper">
        <!-- <cube-index-list
          :data="cityData"
          :navbar="false"
          @select="selectItem"
          @title-click="clickTitle"
        ></cube-index-list>-->
        <cube-index-list :data="cityData" :navbar="false">
          <cube-index-list-group v-for="(group, index) in cityData" :key="index" :group="group">
            <cube-index-list-item
              class="mineitem"
              v-for="(item, index) in group.items"
              :key="index"
              :item="item"
              @select="selectItem"
            >
              <span class="minetitle">
                {{item.name}}
                <span
                  :class="item.value == 1 ? 'learned' : (item.value > 0 ? 'learning':'')"
                  v-if="item.value ? true : false"
                >{{(item.value * 100).toFixed(2)}}%</span>
              </span>
            </cube-index-list-item>
          </cube-index-list-group>
        </cube-index-list>
      </div>
    </div>
  </div>
</template>
<script>
import CubePage from "../components/cube-page.vue";

export default {
  components: {
    CubePage
  },
  data() {
    return {
      title: "学习进度",
      cityData: [
        {
          name: "第1学期",
          items: [
            {
              name: "毛泽东思想和中国特色社会主义理论体系概论",
              value: 1
            },
            {
              name: "网络学习导论",
              value: 1
            },
            {
              name: "微积分",
              value: 0.66
            },
            {
              name: "大学英语(1)",
              value: 0.5
            }
          ]
        },
        {
          name: "第2学期",
          items: [
            {
              name: "大学英语(2)",
              value: 1
            },
            {
              name: "管理学原理(专科)",
              value: 0
            },
            {
              name: "大学语文",
              value: 0
            },
            {
              name: "会计学原理(专科)",
              value: 0
            },
            {
              name: "宏微观经济学(专科)",
              value: 0
            }
          ]
        },
        {
          name: "第3学期",
          items: [
            {
              name: "营销管理学（专科）",
              value: 0
            },
            {
              name: "财务管理(专科)",
              value: 0
            },
            {
              name: "统计学原理(专科)",
              value: 0
            },
            {
              name: "企业经济学(专科)",
              value: 0
            },
            {
              name: "生产运作管理(专科)",
              value: 0
            }
          ]
        },
        {
          name: "第4学期",
          items: [
            {
              name: "管理信息系统(专科)",
              value: 0
            },
            {
              name: "市场预测与决策(专科)",
              value: 0
            },
            {
              name: "经济法(专科)",
              value: 0
            },
            {
              name: "国际贸易与金融",
              value: 0
            },
            {
              name: "人力资源管理(专科)",
              value: 0
            }
          ]
        }
      ]
    };
  },
  methods: {
    selectItem(item) {
      console.log(item.name);
    },
    clickTitle(title) {
      console.log(title);
    }
  }
};
</script>

<style lang="stylus" scoped>
.view-wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 53px;
  width: 100%;

  .index-list-wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

// 用自定义样式，覆写内置的默认样式
.cube-scroll-content {
  top: 44px;
  bottom: 53px;
}

.cube-index-list-content {
  background-color: #222;
  color: #909090;
}

.cube-index-list-anchor {
  background-color: #333;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 20px;
}

.cube-index-list-nav {
  padding: 20px 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);

  >ul {
    >li {
      padding: 3px;
      font-size: 12px;
      color: #909090;

      &.active {
        color: #ffcd32;
      }
    }
  }
}

.header {
  position: relative;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #edf0f4;
  box-shadow: 0 1px 6px #ccc;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 5;

  h1 {
    font-size: 16px;
    font-weight: 700;
  }

  .cubeic-back {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 15px;
    color: #fc9153;
  }
}

.custom-item {
  position: relative;
  height: 70px;
  line-height: 70px;
  padding: 0 16px;
  font-size: $fontsize-medium;
}

.mineitem {
  font-size: 14px;
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  border-bottom: 1px solid #eee;

  .minetitle {
    display: inline-block;
    width: 75%;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-align: left;
    vertical-align: middle;
    color: #333;

    span {
      font-size: 12px;
      position: fixed;
      right: 10px;
    }

    .learning {
      color: #84c00b;
    }

    .learned {
      color: #777;
    }
  }
}
</style>